<%--
  Created by IntelliJ IDEA.
  User: 联想
  Date: 2020/3/22
  Time: 22:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery仿百度登录滑块验证代码 - 站长素材</title>

    <script src="${pageContext.request.contextPath}/static/slidingVerification/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/static/slidingVerification/js/yz.js" type="text/javascript" charset="utf-8"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        button{width: 300px;line-height: 30px;}
        .box {
            margin: 0 auto;
            position: absolute;
            left: 50%;
            top: 50%;
            height: 420px;
            width: 300px;
            margin-left: -150px;
            margin-top: -210px;
            border: 1px solid #ccc;
            background-color: #fff;
            border-radius: 25px;
            display: none;
            z-index: 2;
        }

        .top-s {
            font-size: 12px;
            color: #ccc;
            display: block;
            text-align: center;
            margin-left: 25px;
            margin-top: 25px;
            margin-bottom: 5px;
        }

        .top-x {
            font-size: 18px;
            color: black;
            display: block;
            text-align: center;
            margin-bottom: 45px;
        }

        .cuo {
            float: right;
            margin-right: 10px;
            margin-top: 5px;
            cursor: pointer;
        }

        body {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
    </style>
</head>

<body>

<button class="btn">点击查看效果</button>
<div class="box">
    <img src="${pageContext.request.contextPath}/static/slidingVerification/image/cw.png" class="cuo">
    <span class="top-s">身份验证</span>
    <span class="top-x">拖动滑块，使图片角度为正</span>
    <div id="rotateWrap1">
        <div class="rotateverify-contaniner">
            <div class="rotate-can-wrap">
                <canvas class="rotateCan rotate-can" width="200" height="200"></canvas>
                <div class="statusBg status-bg"></div>
            </div>
            <div class="control-wrap slideDragWrap">
                <div class="control-tips">
                    <p class="c-tips-txt cTipsTxt">滑动将图片转正</p>
                </div>
                <div class="control-bor-wrap controlBorWrap"></div>
                <div class="control-btn slideDragBtn">
                    <i class="control-btn-ico"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    // 加一个div全部 然后设置display：block；
    $(function () {
        // 点击按钮
        $(".btn").click(function () {
            console.log('123123');
            $(".box").css("display", "block");
            $("body").css({ "background": "#807878" });
            $(".btn").attr("disabled", true);
        })
        //    点击x
        $(".cuo").click(function () {
            $(".box").css("display", "none");
            $("body").css("background", "#fff");
            $(".btn").attr("disabled", false);
        })
        //1
        var myRotateVerify = new RotateVerify('#rotateWrap1', {
            initText: '滑动将图片转正',//默认
            slideImage: ['${pageContext.request.contextPath}/static/slidingVerification/image/1.png',
                '${pageContext.request.contextPath}/static/slidingVerification/image/2.png',
                '${pageContext.request.contextPath}/static/slidingVerification/image/4.png',
                '${pageContext.request.contextPath}/static/slidingVerification/image/5.png'],//arr  [imgsrc1,imgsrc2] 或者str 'imgsrc1'
            slideAreaNum: 10,// 误差范围角度 +- 10(默认)
            getSuccessState: function (res) {//验证通过 返回  true;
                // console.log('例1' + res);
            }
        })
    })
</script>

</body>
</html>
